<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ref引用Demo</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<style>
		.square-box{
			width: 100px;
			height: 100px;
			border: 2px solid #ccc;
			margin-top: 25px;
		}
	</style>
	
	
	
	<body>
		<div id="app">
			<square-chanage></square-chanage>

		</div>

		<script>
			var vm = new Vue({
				el: "#app",
				data: {

				},
				components: {
					squareChanage: {
						data() {
							return {
								colorArray: ['red', 'orange', 'yellow', 'green']
							}
						},
						template:
						`
							<div>
								<button
									v-for="color in colorArray"
									:key=color
									:style="{background: color}"
									@click="handleClick(color)"
									>{{color}}
								</button>
								<div class="square-box" ref="squareBox"></div>
							</div>
							
						`,
						methods:{
							handleClick(color){
								console.log(this.$refs);
								const squareBox = this.$refs.squareBox;
								squareBox.style.background = color;
							}
						}
					}

				}

			})
		</script>
	</body>
</html>
